<template>
	<div id="openProtect">
		<mt-button class="iconfont icon-compile">
			查看记录
			<span class="iconfont icon-right"></span>
		</mt-button>
		<div class="list">
			<mt-field label="起点" placeholder="请输入起点"></mt-field>
			<mt-field label="终点" placeholder="请输入终点"></mt-field>
			<mt-field label="用时" placeholder="0.5小时" :value="useTime">
				<span class="iconfont icon-down2" @click="timeListChange"></span>
			</mt-field>
			<ul class="time-list" v-for="item in timeList" v-show="timeListShow">
				<li @click="selectedTime($event)">{{item}}</li>
			</ul>
		</div>
		<mt-button class="open-protect-btn">开启保护</mt-button>
	</div>
</template>

<script>
	export default {
		name: 'openProtect',
		data() {
			return {
				selected: '',
				timeListShow: false,
				timeList: ['1小时','2小时'],
				useTime: ''
			}
		},
		methods: {
			timeListChange: function(){
				this.timeListShow = !this.timeListShow
			},
			selectedTime: function(e){
				this.useTime = e.target.innerText;
				this.timeListShow = false
			}
		}
	}
</script>

<style scoped>
	#openProtect{
		position: fixed;
		width: 100%;
		height: 100%;
		background: #f7f7f7
	}
	.list{
		width: 73%;
		height: auto;
		background-color: #fff;
		margin: .2rem auto;
		padding: .5rem 6%
	}
	.time-list{
		width: 82%;
		background: #fff;
		box-shadow: 0px 1px 1px 1px #ccc;
		float: right;
	}
	.time-list li {
		line-height: .9rem;
		font-size: .32rem;
	}
	.time-list li:nth-child(1){
		border-bottom: 1px dashed #cdcdcd;
	}
</style>
<style>
	#openProtect .mint-button{
		background: rgba(0,0,0,0);
		border: 1px solid #cdcddc;
		height: .7rem;
		padding: 0 .2rem;
		border-radius: .4rem;
		font-size: .32rem;
		margin: .4rem .6rem;
		display: block;
	}
	#openProtect .mint-cell-title{
		width: 25%;
	}
	#openProtect .mint-cell-wrapper{
		border-bottom: 1px dashed #cdcdcd;
	}
	#openProtect .mint-field:nth-child(1){
		border-top: 1px dashed #cdcdcd;
	}
	#openProtect .mint-cell-text{
		font-size: .32rem
	}
	#openProtect .mint-button.open-protect-btn{
		width: 88%;
		border-radius: 0;
		margin-left: 6%;
		height: .8rem;
		line-height: .8rem;
		color: #ffeded;
		border: 1px solid #faa6af;
		background: #faa6af;
		box-shadow: none;
		font-size: .36rem;
		margin-top: 1rem;
	}
</style>